<template>
<!-- 修改密码弹框 -->
  <el-dialog
    :visible.sync="visible"
    title="修改密码"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
      <el-form-item label="账号:">
        <span>{{ dataForm.username }}</span>
      </el-form-item>
      <el-form-item prop="password" label="原密码:">
        <el-input v-model="dataForm.password" type="password" placeholder="原密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="newPassword" label="新密码:">
        <el-input v-model="dataForm.newPassword" type="password" placeholder="新密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword" label="确认密码:">
        <el-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
// import axios from 'axios'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        username:"",//用户名
        password: '',//原密码
        newPassword: '',//新密码
        confirmPassword: ''//确认密码
      }
    }
  },
  mounted(){
    var userinfo = JSON.parse(localStorage.getItem('userinfo'))
    this.dataForm.username = userinfo.username
  },
  computed: {
    dataRule () {
      var validateConfirmPassword = (rule, value, callback) => {
        if (this.dataForm.newPassword !== value) {
          return callback(new Error("确认密码与新密码输入不一致"))
        }
        callback()
      }
      return {
        password: [
          { required: true, message: "必填项不能为空", trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: "必填项不能为空", trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: "必填项不能为空", trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    // 表单提交
    dataFormSubmitHandle(){
      var datainfo = {
        newPassword:this.dataForm.newPassword,
        oldPassword:this.dataForm.password
      }
      if(this.dataForm.password==""||this.dataForm.newPassword==""||this.dataForm.confirmPassword==""){
        this.$message.error('必填项不能为空');
      }else if(this.dataForm.newPassword==this.dataForm.confirmPassword){
        this.axios({
          headers:{'Authentication':localStorage.getItem('token')},
          method:"put",
          // url:"api/user/updatePassword",
          url:"user/updatePassword",
          data:datainfo
        }).then(res=>{
          // console.log(res)
          if(res.data.code != 20001){
            return this.$message.error(res.data.msg)
          }
          this.$message({
            message: '修改密码成功,3S后将自动跳转至登录页重新登录！',
            type: 'success'
          });
          var timer = null
          timer = setTimeout(()=>{
            this.$router.replace({ name: 'login'})
            this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'login')
            localStorage.clear()
          },3000)
        })
      }
      
    }
  }
}
</script>
